<template>
  <div>
    <el-dialog v-bind="$attrs" :visible.sync="showDialog" v-on="$listeners" @open="onOpen" @close="onClose" title="Dialog Titile">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span='24'> 
            <!-- 用户头像 -->
            <el-form-item label="用户头像">
              <!-- 头像略缩图 -->
              <pan-thumb :image="formData.avatar"/> 
              <!-- <pan-thumb  :image="String(filePath)"> -->

              <!-- 文件上传按钮 -->
              <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
              </el-button>

              <image-cropper
                v-show="imagecropperShow"
                :width="300"
                :height="300"
                :key="imagecropperKey"
                :url="'/uploadImgFile'"
                field="multipartFile"
                @close="closeImage"
                @crop-upload-success="cropSuccess"/>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="科室名称" prop="departmentName">
              <el-input v-model="formData.departmentName" placeholder="请输入科室名称" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="医生姓名" prop="userName">
              <el-input v-model="formData.userName" placeholder="请输入医生姓名" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="formData.age" placeholder="请输入年龄" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会诊时间" prop="appointment">
              <el-input v-model="formData.appointment" placeholder="请输入会诊时间" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="formData.gender" size="medium">
                <el-radio v-for="(item, index) in genderOptions" :key="index" :label="item.value"
                  :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="级别" prop="type">
              <el-radio-group v-model="formData.type" size="medium">
                <el-radio v-for="(item, index) in typeOptions" :key="index" :label="item.value"
                  :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入联系方式" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input v-model="formData.password" placeholder="请输入密码" clearable show-password
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="个人简介" prop="introduction">
              <el-input v-model="formData.introduction" type="textarea" placeholder="请输入个人简介"
                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="医疗特长" prop="speciality">
              <el-input v-model="formData.speciality" type="textarea" placeholder="请输入医疗特长"
                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {saveUser} from '../../api/users'
import {saveRoleUser} from '../../api/role'
import ImageCropper from '../../components/ImageCropper'
import PanThumb from '../../components/PanThumb'
export default {
  inheritAttrs: false,
  components: {
    ImageCropper,
    PanThumb,
  },
  props: {
      addOrUpdateVisible:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      showDialog:false,
      formData: {
        avatar:'https://cdn.pixabay.com/photo/2016/10/29/13/49/medical-sister-1780698__480.jpg',
        departmentName: undefined,
        userName: undefined,
        age: undefined,
        appointment: undefined,
        gender: 1,
        type: 0,
        phone: undefined,
        password: undefined,
        introduction: undefined,
        speciality: undefined,
      },
      roleUser:{
        roleId: 2,
        userId:''
      },
      imagecropperShow: false,
      imagecropperKey: 0,
      image: '',
      rules: {
        departmentName: [{
          required: true,
          message: '请输入科室名称',
          trigger: 'blur'
        }],
        userName: [{
          required: true,
          message: '请输入医生姓名',
          trigger: 'blur'
        }],
        age: [{
          required: true,
          message: '请输入年龄',
          trigger: 'blur'
        }],
        appointment: [{
          required: true,
          message: '请输入会诊时间',
          trigger: 'blur'
        }],
        gender: [{
          required: true,
          message: '性别不能为空',
          trigger: 'change'
        }],
        type: [{
          required: true,
          message: '级别不能为空',
          trigger: 'change'
        }],
        phone: [{
          required: true,
          message: '请输入联系方式',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }],
        introduction: [{
          required: true,
          message: '请输入个人简介',
          trigger: 'blur'
        }],
        speciality: [{
          required: true,
          message: '请输入医疗特长',
          trigger: 'blur'
        }],
      },
      genderOptions: [{
        "label": "男",
        "value": 1
      }, {
        "label": "女",
        "value": 0
      }],
      typeOptions: [{
        "label": "专家",
        "value": 1
      }, {
        "label": "普通",
        "value": 0
      }],
    }
  },
  computed: {},
  watch: {
    addOrUpdateVisible(oldVal,newVal){
    this.showDialog = this.addOrUpdateVisible
    }
  },
  created() {},
  mounted() {},
  methods: {
    onOpen() {},
    onClose() {
      this.$refs['elForm'].resetFields()
      this.$emit('changeShow','false')
    },
    close() {
      this.$emit('update:visible', false)
      this.$emit('changeShow','false')
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.addDoctor()
      })
    },
  //插入信息
    async addDoctor() {
       const { data:res } = await saveUser(this.formData)
       console.log(res)
      if (res.code == 200) {
        this.roleUser.userId = res.data.userId
        const res2 = await saveRoleUser(this.roleUser)
       console.log(res2)
        this.$notify.success({
          title: '操作成功',
          message: '新增信息成功',
        })
        //关闭
        this.$emit('changeShow','false')
        //this.formData = {}
        this.$emit('getDoctors');
      //  this.$emit('getDeptAndCount');
      } else {
        return this.$message.error('新增失败：'+res.message)
      }

    },
     //上传成功后的回调函数
    cropSuccess(data) {
      console.log(data)
 
      this.imagecropperShow = false;
      console.log(data.data.url);
      this.formData.avatar = data.data.url;
      //上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
      //上传后删除之前的头像
      console.log('avatar↓');
   //   console.log(this.user.avatar);
      //this.deleteAvatar(oldImage);
    },
     //关闭上传组件
    closeImage() {
      this.imagecropperShow = false
      //上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },
  }
}

</script>
<style>
</style>
